<template >
  <div class="edit">
    <el-steps :space="200"
              :active="active"
              simple
              class="edit-top">
      <el-step title="试卷选择"><template #icon><span class="iconfont icon-classify"></span></template></el-step>
      <el-step title="试卷配置"><template #icon><span class="iconfont icon-shiti"></span></template></el-step>
      <el-step title="考试配置"><template #icon><span class="iconfont icon-setting"></span></template></el-step>
      <el-step title="用户选择"><template #icon><span class="iconfont icon-persons"></span></template></el-step>
      <el-step title="考试发布"><template #icon><span class="iconfont icon-publish"></span></template></el-step>
    </el-steps>
    <PaperSelect v-if="active === 0"
                 @select="(type) => paperSelect(type)"></PaperSelect>
    <Paper ref="paper"
           v-if="active === 1 && form.genType === 1"
           :show="paperShow"
           @paperShowUpdate="(show) => paperShow = show"></Paper>
    <PaperRule ref="paperRule"
               v-if="active === 1 && form.genType === 2"></PaperRule>
    <ExamSetting ref="examSetting"
                 v-if="active === 2"></ExamSetting>
    <ExamUser ref="examUser"
              v-if="active === 3"></ExamUser>
    <ExamPublish v-if="active === 4"></ExamPublish>
    <div class="edit-bottom">
      <div v-if="progressBar.percent > 0"
           class="edit-bottom-percent">
        <el-progress :percentage="progressBar.percent">{{ progressBar.msg }}</el-progress>
      </div>
      <el-button v-if="active >= 1 && paperShow != 'editor' && btnShow"
                 type="primary"
                 @click="active--">上一步</el-button>
      <el-button v-if="active >= 1 && active < 4 && paperShow != 'editor' && btnShow"
                 type="primary"
                 @click="next()">下一步</el-button>
      <el-button v-if="active >= 4 && paperShow != 'editor' && btnShow"
                 type="primary"
                 @click="publish()">发布</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import http from '@/request'
import { useExamStore, type ExamQuestion, type ExamRule } from '@/stores/exam'
import dayjs from 'dayjs'
import { ElMessage } from 'element-plus'
import { onMounted, reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import ExamPublish from './ExamPublish.vue'
import ExamSetting from './ExamSetting.vue'
import ExamUser from './ExamUser.vue'
import Paper from './Paper.vue'
import PaperRule from './PaperRule.vue'
import PaperSelect from './PaperSelect.vue'

// 定义变量
const route = useRoute()
const router = useRouter()
const active = ref(0) // 当前激活步骤
const paperShow = ref('paper') // 试卷显示
const form = useExamStore() // 考试储存
const paper = ref() // 试卷配置组件
const paperRule = ref() // // 试卷配置组件
const examSetting = ref() // 考试配置组件
const examUser = ref() // 考试用户组件
const btnShow = ref(true) // 按钮显示
const progressBar = reactive({
  // 进度条
  percent: 0, // 进度
  code: 200, // 响应码
  msg: '', // 响应消息
})

// 组件挂载完成后，执行如下方法
onMounted(async () => {
  // 如果是添加，初始化数据
  if (route.path.indexOf('/exam/add') >= 0) {
    form.id = null
    form.name = `考试-${dayjs().add(0, 'day').format('YYYY-MM-DD')}`
    form.paperName = `试卷-${dayjs().add(0, 'day').format('YYYY-MM-DD')}`
    form.examTimes = [
      dayjs()
        .add(0, 'day')
        .hour(8)
        .minute(0)
        .second(0)
        .format('YYYY-MM-DD HH:mm:ss'),
      dayjs()
        .add(0, 'day')
        .hour(10)
        .minute(0)
        .second(0)
        .format('YYYY-MM-DD HH:mm:ss'),
    ]
    form.markTimes = [
      dayjs()
        .add(0, 'day')
        .hour(14)
        .minute(0)
        .second(0)
        .format('YYYY-MM-DD HH:mm:ss'),
      dayjs()
        .add(0, 'day')
        .hour(18)
        .minute(0)
        .second(0)
        .format('YYYY-MM-DD HH:mm:ss'),
    ]
    form.genType = 1
    form.passScore = 0
    form.sxes = [] as number[]
    form.showType = 1
    form.anonState = 2
    form.scoreState = 2
    form.rankState = 2
    form.state = 1
    form.examQuestions = [] as ExamQuestion[]
    form.examRules = [] as ExamRule[]
    form.examUserIds = [] as number[]
    form.markUserIds = [] as number[]
  }
  // 如果是修改，回显数据
  else if (route.path.indexOf('/exam/edit/') >= 0 && route.params.id) {
    let {
      data: { data },
    } = await http.post('exam/paper', { id: route.params.id })
    form.id = data.id
    form.name = data.name
    form.paperName = data.paperName
    form.examTimes[0] = data.startTime
    form.examTimes[1] = data.endTime
    if (data.markType === 2) {
      form.markTimes[0] = data.markStartTime
      form.markTimes[1] = data.markEndTime
    }
    form.genType = data.genType
    form.passScore = data.passScore
    form.sxes = data.sxes
    form.showType = data.showType
    form.anonState = data.anonState
    form.scoreState = data.scoreState
    form.rankState = data.rankState
    form.state = data.state
    form.examQuestions = data.examQuestions
    form.examRules = data.examRules
    form.examUserIds = data.examUserIds
    form.markUserIds = data.markUserIds
    form.noUpdate()

    if (form.genType === 1) {
      // 根据组卷类型自动跳到下一步
      paperSelect('blank')
    } else {
      paperSelect('random')
    }
  }
})

// 试卷选择方式
function paperSelect(type: string) {
  // 选择空白试卷，组固定试卷，显示空白试卷
  if (type === 'blank') {
    form.genType = 1
    paperShow.value = 'paper'
    next()
  }
  // 选择文本导入，组固定试卷，显示试题编辑器
  else if (type === 'quick') {
    form.genType = 1
    paperShow.value = 'editor'
    next()
  }
  // 选择随机试卷，组随机试卷，显示抽题规则页面
  else if (type === 'random') {
    form.genType = 2
    next()
  }
}

// 下一步
async function next() {
  if (active.value === 0) {
    // 试卷选择
    active.value++
    return
  }

  if (active.value === 1) {
    // 试卷配置
    let component = form.genType === 1 ? paper : paperRule
    console.log(component, 132)
    if (await component.value.next()) {
      if (form.subjectiveQuestionNum + form.objectiveQuestionNum === 0) {
        ElMessage.error(`最少添加一${form.genType === 1 ? '道试题' : '条规则'}`)
        return
      }

      active.value++
    }
    return
  }
  console.log(active.value)
  if (active.value === 2) {
    // 考试配置
    let component = examSetting
    console.log(component, 132)
    if (await component.value.next()) {
      active.value++
    }
    return
  }

  if (active.value === 3) {
    // 用户选择
    let component = examUser
    if (await component.value.next()) {
      active.value++
    }
  }
}

// 发布考试
async function publish() {
  // 隐藏发布等按钮
  btnShow.value = false
  let SessionTime= dayjs().add(dayjs(form.SessionTime).hour(), 'h').add(dayjs(form.SessionTime).minute(), 'm').add(dayjs(form.SessionTime).second(), 's')
  // 发布考试
  let {
    data: { code, data: processBarId },
  } = await http.post(
    'exam/publish',
    JSON.stringify({
      id: form.id,
      name: form.name,
      paperName: form.paperName,
      genType: form.genType,
      passScore: form.passScore,
      sxes: form.sxes,
      showType: form.showType,
      anonState: form.anonState,
      scoreState: form.scoreState,
      rankState: form.rankState,
      state: form.state,
      examQuestions: form.examQuestions,
      examRules: form.examRules,
      examUserIds: form.examUserIds,
      markUserIds: form.markUserIds,
      totalScore: form.totalScore,
      markType: form.markType,
      startTime: form.examTimes[0],
      endTime: form.examTimes[1],
      markStartTime: form.markType === 2 ? form?.markTimes[0] : '',
      markEndTime: form.markType === 2 ? form?.markTimes[1] : '',
      SessionTime: SessionTime.valueOf()
    }),
    { headers: { 'Content-Type': 'application/json' } }
  )

  if (code !== 200) {
    // 如果有异常，显示按钮重新操作
    btnShow.value = true
    return
  }

  // 显示进度
  let timer = setInterval(async function () {
    let {
      data: { code, msg, data },
    } = await http.post('progressBar/get', { id: processBarId })
    progressBar.code = code
    progressBar.msg = msg
    progressBar.percent = data.percent

    if (code !== 200) {
      // 如果报错，停止进度条，显示按钮
      clearInterval(timer)
      btnShow.value = true
      return
    }

    if (progressBar.percent < 100) {
      // 如果进度不足100%，间隔1秒在查询进度
      return
    }

    // 完成后跳转道考试列表页面
    clearInterval(timer)
    router.push('/exam')
  }, 1000)
}
</script>

<style lang="scss" scoped>
.edit {
  display: flex;
  flex-direction: column;
  height: calc(100% - 20px);
  position: relative;

  .edit-top {
    background-color: white;
  }

  .edit-bottom {
    position: absolute;
    bottom: 0px;
    right: 0px;
    .edit-bottom-percent {
      display: inline-block;
      margin: 0px 30px 30px 0px;
      width: 400px;
    }
  }
}
</style>
